<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>房屋管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" th:href="@{/front/js/layui/css/layui.css}" type="text/css">
</head>
<body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-warm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-danger" lay-event="delAll">删除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<table id="demo" lay-filter="demo"></table>
<script th:src="@{/front/js/layui/layui.js}"></script>
<script th:inline="javascript" type="text/javascript">
    layui.use(['table', 'jquery'], function () {
        let table = layui.table;
        let $ = layui.jquery;
        let cxtPath = /*[[@{/}]]*/'';
        //执行渲染
        table.render({
            elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
            url: cxtPath + 'house/page',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['exports', 'print'],
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 3 //只显示 1 个连续页码
                , first: '首页' //显示首页
                , last: '尾页' //显示尾页
            },
            cols: [ [        //设置表头
                {type: 'checkbox'},
                {field: 'hid', title: 'ID', hide: true, fixed: 'left'},
                {field: 'title', title: '标题'},
                {
                    field: 'img', title: '宣传图', templet: function (d) {
                        return "<img src=' "+cxtPath+ d.img + " '  width='50px'>";
                    }
                },
                {field: 'city', title: '城市'},
                {field: 'rent', title: '租金', sort: true},
                {field: 'area', title: '面积'},
                {field: 'type', title: '房屋类型'},
                {field: 'mode', title: '出租方式'},
                {field: 'explain', title: '房屋说明'},
                {field: 'facilities', title: '配套设施'},
                {field: 'trafficInfo', title: '交通情况'},
                {field: 'address', title: '地址', hide: true},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]],


        });


        //头工具栏事件
        table.on('toolbar(demo)', function (obj) {
            switch (obj.event) {
                case 'delAll':
                    let checkStatus = table.checkStatus('demo');
                    if (checkStatus.data.length == 0) {
                        layer.msg('至少选择一条数据', {icon: 2});
                        return;
                    }
                    let ids = [];
                    for (let i in checkStatus.data) {
                        ids.push(checkStatus.data[i].hid);
                    }
                    layer.confirm('真的删除行么', {icon: 3}, function (index) {
                        $.ajax({
                            url: cxtPath + 'house/delList'
                            , contentType: 'application/json'
                            , type: 'post'
                            , data: JSON.stringify(ids)
                            , success: function () {
                                layer.msg('删除成功', {icon: 1});

                                //重新加载数据
                                table.reload("demo", {
                                    page: {
                                        curr: 1
                                    }
                                });
                            }
                        })
                    });
                    break;
                case 'add':
                    layer.open({
                        type: 2,
                        title: '添加',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['893px', '600px'],
                        content: cxtPath + 'admin/add'
                    });
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(demo)', function (obj) {
            let data = obj.data;
            //删除单行
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', {icon: 3}, function (index) {
                    $.post(cxtPath + 'house/del?id=' + data.hid, function () {
                        table.reload("demo", {
                            page: {curr: 1}
                        });
                        layer.close(index);
                    })
                });
                //修改单行
            } else if (obj.event === 'edit') {
                let param = $.param(data);
                console.log(param);
                layer.open({
                    type: 2,
                    title: '编辑',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1000px', '600px'],
                    content: cxtPath + 'admin/upp?' + param
                });
            }
        });
    })
</script>
</body>
</html>
